<template>
  <div id="app">
    <!-- 选择照片的input，type=file 隐藏起来等待触发就好 -->
    <input 
      type="file" id="fileInput" 
      name="file" 
      style="display:none;" 
      ref="fileInput"
    />
    <div class="nav-bar" >
        <span class="nav-bar-left"  @click="selectNewPhoto">打开</span>
        <span class="nav-bar-right">
          <!-- <i class="iconfont nav-icon">&#xe601;</i> -->
          <i class="iconfont nav-icon" @click="showCollapse = true">&#xeb2f;</i>
        </span>
    </div>
    <van-popup v-model="showCollapse" closeable>
      <CollapseInfo />
    </van-popup>
    <select-photo @selectPhoto="selectNewPhoto" v-if="isSelectHome"></select-photo>
    <router-view/>
  </div>
</template>

<script>
import SelectPhoto from "./components/SelectPhoto"
import CollapseInfo from "./components/CollapseInfo"
export default {
  components : {
    SelectPhoto,
    CollapseInfo
  },
  data () {
    return {
      isSelectHome : false,
      imageSrc : '',
      showCollapse: false,
    }
  },
  methods: {
    selectNewPhoto() {
      // 监听是否有选择文件
      let self = this;
      this.$refs.fileInput.value = '';
      this.$refs.fileInput.onchange = function(e){
        try {
          self.imageSrc = URL.createObjectURL(e.target.files[0]);
          console.log(self.imageSrc)
          if(self.imageSrc){
            self.$store.state.imgSrc = self.imageSrc;  // 存储到仓库
            self.isSelectHome = false;
            if(self.$route.name == 'Crop'){
              self.$store.state.imgSrc = self.imageSrc;  // 存储到仓库
            }else{
              self.$router.push({
              name : "Crop", //路由配置中的name
            });
            }
          }
        }catch (err){
          console.log(err,'未选择照片');
        }
      }
      this.$refs.fileInput.click(); // 选择照片
    }
  },
  created () {
    this.isSelectHome = true;
  }
};
</script>

<style>
@font-face {
  font-family: 'iconfont';  /* project id 2434445 */
  src: url('./assets/font/iconfont.eot');
  src: url('./assets/font/iconfont.eot?#iefix') format('embedded-opentype'),
  url('./assets/font/iconfont.woff2') format('woff2'),
  url('./assets/font/iconfont.woff') format('woff'),
  url('./assets/font/iconfont.ttf') format('truetype'),
  url('./assets/font/iconfont.svg#iconfont') format('svg');
}

.nav-bar {
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 999;
  justify-content: space-between;
  width: 100vw;
  height: 46px;
  line-height: 46px;
  background-color: #fff;
}

.nav-bar .nav-bar-left {
  color: #4662D9;
  margin-left: 15px;
  transition: all .3s;
}

.nav-bar .nav-bar-left:active,
.nav-bar .nav-bar-right i:nth-of-type(1):active,
.nav-bar .nav-bar-right i:nth-of-type(2):active {
  opacity: .3;
}

.nav-bar .nav-bar-right {
  margin-right: 15px;
}

.iconfont{
    font-family:"iconfont" !important;
    font-size:22px;
    font-style:normal;
    color: #666;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

.nav-icon {
  padding: 0 10px;
}

#app {
  background-color: #EAEAEA;
  overflow: hidden;
  touch-action: none;
  height: 100%;
}
</style>
